<template>
  <el-container class="home-container">
  <el-header>
    <div>
      <img src="../assets/img/heima.png" alt="">
      <span>电商管理系统</span>
    </div>
    <el-button type="info" round @click="logOut()">退出</el-button></el-header>
  <el-container>
    <el-aside :width="newCollapse ? '64px' : '200px'"><Aside @toParent="change($event)"></Aside></el-aside>
    <el-main><Main></Main></el-main>
  </el-container>
</el-container>
</template>

<script>
import Aside from '../components/Aside'
import Main from '../components/Main'

export default {
  name: 'Home',
  components: {
    Aside,
    Main
  },
  data () {
    return {
      newCollapse: false
    }
  },
  methods: {
    logOut () {
      window.sessionStorage.clear()
      this.$router.push('./login')
    },
    change (data) {
      console.log(data)
      this.newCollapse = data
    }
  }
}
</script>

<style Lang="less" scoped>
  .el-header{
    background-color: #363d40;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 0;
    font-size: 20px;
    color: #fff;
  }
  .el-header div{
    display: flex;
    align-items: center;
  }
  .el-header div span{
    margin-left: 15px;
  }
  .el-aside{
    background-color: #313743;
  }
  .home-container{
    height: 100%;
  }
</style>
